<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<meta title="template ../index.html">
	<title>Graphics using &lt;canvas&gt;</title>
	
</head>

<body>
<div id="main_title">Graphics using &lt;canvas&gt;</div>
<div id="content">
<div class="notes">
<h4>Mathematical graphics</h4>
<p> If you want graphics that have the origin at the bottom left corner, with increasing <i>y</i> coordinates going up, use the option 
<code title="py_code">origin = 'bottom'</code> when initializing the graphics.
</p>
</div>
<p>Using Crunchy, you can draw the most incredible pictures. 
 Try the following example; following the usual convention in computer graphics (but not in mathematics) the origin is at the top left corner.  
The drawing will take place when you press the appropriate button; it is left as a challenge for you to find it. [Note that this will only work if you use a
browser that supports the html <code>&lt;canvas&gt;</code> tag.]</p>

<pre title="editor">
import graphics
graphics.init(300, 300)
for i in range(50):
   for j in range(50):
       r = 255 - 5*i
       g = 255 - 5*j
       graphics.set_fill_color('rgb(%d, %d, 0)'%(r,g))
       graphics.filled_rectangle((j*6, i*6), 6, 6)
</pre>
<p>
Drawing only squares, however colorful, might be boring.  Instead, you could try the following; it includes essentially all the canvas graphics commands currently supported by Crunchy.  
</p>

<pre title="editor">
from graphics import *
init()

point(10, 10)
point(100, 10)
set_line_colour('red')  # Canadian/British spelling for "colour"
line((11, 10), (99, 10))

circle((100, 100), 50)
set_line_color('blue') # American spelling for "color"
circle((100, 100), 30)

set_line_colour('#ff0000') # red
triangle((200, 10), (240, 10), (220, 30))
set_fill_colour('#00ff00') # green
filled_triangle((200, 50), (240, 50), (220, 30))

filled_circle((100, 200), 50)
set_fill_colour('rgb(0, 0, 255)')  # blue
filled_circle((100, 200), 40)

width, height = 20, 10
rectangle((150, 10), width, height)
filled_rectangle((150, 25), width, height)

set_fill_color('red')
y = 300
filled_circle((100, y), 40)
for i in range(10):
    r = 255-i*5
    g = i*20
    b = i*20
    a = 0.5 - 0.04*i
    set_fill_colour('rgba(%s, %s, %s, %s)'%(r, g, b, a))
    x = 100 + 20*i
    r = 40 + 10*i
    filled_circle((x, y), r)
</pre>

<p>Rather than going straight to the next page, if you want, you can make a little detour 
and have a look at <a href="named_colours_en.html">valid colour names</a> used in Crunchy.
If you do so, I suggest you ctrl-click the link (or cmd-click on a Mac) to open
the page in a new tab.</p>

<h3 >Using the interpreter</h3>
<p>You can also create graphics using the interpreter.  
<small>If you clicked on the link above, and used the back button of your browser
to come restore this page, you will find that you need to reload this page to see
the interpreter.</small> Try the following:</p>
<pre title="interpreter">
&gt;&gt;&gt; import graphics as g
&gt;&gt;&gt; g.init()
&gt;&gt;&gt; g.line((100, 100), (200, 200))
</pre>

<h3 >Advanced stuff</h3>
<p>Not only Crunchy has not only static graphics capabilities but it
also supports simple animations.  However, sometimes the animation may seem to 
stall (for example, with Firefox 2.x, but not 3.0).  In this example, we use an
option setting the origin is at the bottom left corner.</p>

<pre title="editor">
from graphics import  *
init(origin='bottom')
import time
for i in range(40):
    set_fill_colour("black")
    filled_rectangle((0, 0), 400, 400)
    set_fill_colour("yellow")
    filled_rectangle((10*i, 10*i), 50, 50)
    time.sleep(0.1)
</pre>
<h3 >Graphics reference</h3>
<p>The following table is a summary of available graphics commands.</p>
<table summary="Available graphics commands" class='summary'>
<tr><th colspan='2'>Available graphics commands</th></tr>
<tr>
<td><code>init(width=400, height=400, border_color='red', origin='top')</code></td>
<td>Initializes a canvas graphics.</td>
</tr>
<tr>
<td><code>clear()</code></td>
<td>Clear an existing graphics; equivalent to <code>init(0, 0)</code>.</td>
</tr>
<tr>
<td><code>point(x, y)</code></td><td>Draws a point in the default line colour.</td>
</tr>
<tr>
<td><code>circle((x, y), r)</code></td><td>Draws a circle of radius <code>r</code> centred on <code>(x, y)</code> in the default line colour.</td>
</tr>
<tr>
<td><code>line((x1, y1), (x2, y2))</code></td><td>Draws a line from point <code>(x1, y1)</code> to point <code>(x2, y2)</code> in the default line colour.</td>
</tr>
<tr>
<td><code>rectangle((top, left), width, height)</code></td><td>Draws a rectangle in the default line colour.</td>
</tr>
<tr>
<td><code>triangle((x1, y1), (x2, y2), (x3, y3))</code></td><td>Draws a triangle joining the three points in the default line colour.</td>
</tr>
<tr>
<td><code>filled_circle((x, y), r)</code></td><td>Draws a filled circle of radius r centred on <code>(x, y)</code> in the default fill colour.</td>
</tr>
<tr>
<td><code>filled_rectangle((top, left), width, height)</code></td><td>Draws a filled rectangle in the default fill colour.</td>
</tr>
<tr>
<td><code>filled_triangle((x1, y1), (x2, y2), (x3, y3))</code></td><td>Draws a filled triangle joining the three points in the default fill colour.</td>
</tr>
<tr>
<td><code>set_line_color(color)</code> <em>or</em><br/>
<code>set_line_colour(colour)</code>
</td><td>Sets the default line colour using a valid value given as a <b>string</b>. The various options are given in the table below.</td>
</tr>
<tr>
<td><code>set_fill_color(color)</code>
<em>or</em><br/>
<code>set_fill_colour(colour)</code>
</td><td>Sets the default fill colour using a valid value given as a <b>string</b>. The various options are given in the table below.</td>
</tr>
</table>

<br />

<table summary="valid colours" class='summary'>
<tr><th colspan='2'>Valid colours</th></tr>
<tr><td><a href="named_colours_en.html">'named colour'</a></td><td>HTML colour name.</td></tr>
<tr><td>'hex value'</td><td>Colours are defined using a hexadecimal notation for the combination of Red, Green, and Blue colour values (RGB). The lowest value that can be given to one basic colour is 0 (hex #00). The highest value is 255 (hex #FF or #ff; both upper and lower case letters are accepted).  See <a href="named_colours_en.html">named colours</a> for examples. </td></tr>
<tr><td>'rgb(<em>red, green, blue</em>)'</td><td>Colours are defined using a decimal notation for the combination of Red, Green, and Blue colorr values (RGB). The lowest value that can be given to any one of the basic colour (<em>red</em>, <em>green</em>, or <em>blue</em>) is 0. The highest value is 255. </td></tr>
<tr><td>'rgba(<em>red, green, blue, alpha</em>)'</td><td>Similar to rgb(<em>red</em>, <em>green</em>, or <em>blue</em>), but with the addition of a transparency parameter (<em>alpha</em>). The valid range of values is from 0.0 (fully transparent) to 1.0 (fully opaque). By default, this property is set to 1.0 (fully opaque). </td></tr>
</table>
<h3 >Advanced stuff, for tutorial writers</h3>
<p>Surprise, there is nothing special to do.  Every interactive object (interpreter and editor) can use the graphics module.</p>

</div>

</body>
</html>
